<script setup>

</script>

<template>
  <div>
    <div class="head">
      <img src="../assets/images/logo.png" alt="">
      <div class="author-center" @click="turnToLogin">作者中心</div>
    </div>
    <div class="bg-box">
      <img src="../assets/images/novel_illu.png" alt="">
      <div class="slogen">探索无尽的故事世界，尽在阅兔！</div>
      <div class="des">"阅兔，你的专属小说阅读伙伴。我们提供丰富的小说资源，涵盖各种类型和风格，满足你的阅读需求。我们的阅读界面简洁明了，让你享受舒适的阅读体验。无论你是喜欢经典名著还是热门新作，阅兔都能满足你。立即下载阅兔，开启你的阅读之旅！"</div>
    </div>
    <div class="image-container">
      <div class="intro">
        <div class="img-box">
          <img src="../assets/images/reader.png" alt="阅读器">
        </div>
        <div class="intro-info"> 沉浸式阅读体验 </div>

      </div>
      <div class="intro">
        <div class="img-box">
          <img src="../assets/images/square.png" alt="动态">
        </div>
        <div class="intro-info"> 多彩的社区内容 </div>
      </div>
      <div class="intro">
        <div class="img-box">
          <img src="../assets/images/bookstore.png" alt="动态">
        </div>
        <div class="intro-info"> 丰富的阅读选择</div>
      </div>

    </div>
    <div class="blank">

    </div>
  </div>






</template>

<style scoped>
  .head{
    width: 100%;
    height: 50px;
    background-color: orange;
    margin-bottom: 20px;
  }
  .head img {
    width: 50px;
    height: 50px;
    float: right;
    margin-right: 20px;
  }
  .author-center{
    float: right;
    margin-right: 20px;
    line-height: 50px;
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
  .bg-box {
    width: 100%;
    height: 100%;
    //background: url("../assets/images/novel_illu.png") no-repeat;
  }
  .slogen{
    position: absolute;
    top: 200px;
    right: 200px;
    font-size: 30px;
    font-weight: bold;
  }
  .des{
    position: absolute;
    top: 240px;
    right: 100px;
    width: 600px;
    font-size: 20px;
    color: grey;
    line-height: 1.5;
  }

  .image-container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .intro{
    height: 600px;
    width: 300px;
    background-color: #fefefe;
    border: solid 1px orange;
  }

  .intro-info{
    height: 50px;
    background-color: orange;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
  }
  .img-box {

    width: 280px;
    height: 500px;
    margin: 25px 10px;
    overflow: hidden;
  }

  .img-box img{
    width: 270px;
  }

  .blank{
    height: 200px;
  }



</style>
<script>
  export default {
    methods: {
      turnToLogin() {
        this.$router.push({
          path: '/login'
        })
      }
    }

  }
</script>